import React, {PureComponent} from 'react';
import {connect} from 'dva';
import {Form, Input, message, Modal,} from 'antd';

const FormItem = Form.Item;
const {confirm} = Modal;

const formItemLayout = {
  labelCol: {
    xs: {span: 24},
    sm: {span: 7},
  },
  wrapperCol: {
    xs: {span: 24},
    sm: {span: 12},
    md: {span: 10},
  },
};

@Form.create()
class ResetPassword extends PureComponent {

  state = {
    confirmDirty: false
  };

  handleOk = () => {
    const {form, dispatch, parent} = this.props;
    form.validateFieldsAndScroll((errors, values) => {
      if (errors) {
        return
      }
      if (values.newPassword !== values.againPassword) {
        message.warning("新密码两次输入不一致，请重新输入！");
        return
      }

      dispatch({
        type: 'user/resetPassword',
        payload: values,
        callback: (result) => {
          if (result.resultCode && result.resultCode === "1") {
            form.resetFields();
            parent.setState({
              resetModalVisible: false
            });
            // message.warn("修改成功，请退出登录使用新密码重新登录！")
            confirm({
              title: '修改成功',
              content: '是否立即退出，并使用新密码重新登录？',
              okText: '立即退出',
              cancelText: '取消',
              // okButtonProps: {icon: 'check'},
              // cancelButtonProps: {icon: 'close', type: 'dashed'},
              onOk() {
                if (dispatch) {
                  dispatch({
                    type: 'login/logout',
                  });
                }
              },
              onCancel() {
                console.log('Cancel');
              },
            });
          } else {
            message.warn(result.resultDesc)
          }
        },
      });
    })
  }

  onCancel = () => {
    const {form, parent} = this.props;
    parent.setState({
      resetModalVisible: false
    })
    form.resetFields();
  }

  handleConfirmBlur = e => {
    const {value} = e.target;
    this.setState({confirmDirty: this.state.confirmDirty || !!value});
  };

  compareToFirstPassword = (rule, value, callback) => {
    const {form} = this.props;
    if (value && value !== form.getFieldValue('newPassword')) {
      callback('两次输入的新密码不一致!');
    } else {
      callback();
    }
  };

  validateToNextPassword = (rule, value, callback) => {
    const {form} = this.props;
    if (value && this.state.confirmDirty) {
      form.validateFields(['againPassword'], {force: true});
    }
    callback();
  };

  render() {
    const {form: {getFieldDecorator}, modalVisible} = this.props;

    return (
      <Modal
        title='修改密码'
        visible={modalVisible}
        onOk={this.handleOk}
        onCancel={this.onCancel}
      >
        <Form>
          <FormItem
            {...formItemLayout}
            label="原密码"
          >
            {getFieldDecorator('password', {
              rules: [{
                required: true, message: '请输入原密码',
              }],
            })(
              <Input.Password placeholder="请输入原密码"/>
            )}
          </FormItem>
          <FormItem
            {...formItemLayout}
            label="新密码"
          >
            {getFieldDecorator('newPassword', {
              rules: [
                {
                  required: true, message: '请输入新密码',
                },
                {
                  validator: this.validateToNextPassword,
                }
              ],
            })(
              <Input.Password placeholder="请输入新密码"/>
            )}
          </FormItem>
          <FormItem
            {...formItemLayout}
            label="确认新密码"
          >
            {getFieldDecorator('againPassword', {
              rules: [
                {
                  required: true, message: '请再次输入新密码',
                },
                {
                  validator: this.compareToFirstPassword,
                }
              ],
            })(
              <Input.Password placeholder="请再次输入新密码" onBlur={this.handleConfirmBlur}/>
            )}
          </FormItem>
        </Form>
      </Modal>
    );
  }
}

export default connect(({user}) => ({
  user,
}))(ResetPassword);
